<template>
	<view>
		<text>图片分析</text>
		<button type="default" @click="upImg">上传图片</button>
		<image :src="img" mode="aspectFill"></image>
		<view class="list">
			<view class="thead">
				<text>关键词</text>
				<text>来源</text>
				<text>分数</text>
			</view>
			<template v-for="(item,index) in list">
				<view class="item" :key="index">
					<text>{{item.keyword}}</text>
					<text>{{item.root}}</text>
					<text>{{item.score}}</text>
				</view>
			</template>
			<template v-if="!list.length">
				<view class="empty">暂无分析数据</view>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				img: '',
				list: []
			}
		},
		methods: {
			upImg() {
				let that = this;
				uni.chooseImage({
					success(res) {
						const url = res.tempFilePaths[0];
						that.img = url;
						uni.request({
							url: url,
							responseType: 'arraybuffer',
							success(res) {
								const base64 = uni.arrayBufferToBase64(res.data);
								uni.showLoading({
									title: '分析中'
								})
								uniCloud.callFunction({
									name: 'testImgAnalysis',
									data: {
										image: base64
									},
									success(res) {
										uni.hideLoading();
										const list = res.result.result;
										that.list = list;
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>
<style scoped>
	.thead,
	.item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 10rpx 0;
		font-size: 28rpx;
	}

	.thead {
		background-color: #999;
	}

	.item {
		background-color: #F5F5F5;
	}

	.empty {
		padding: 20rpx 0;
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}
</style>
